<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <style>
        html,
        body {
            width: 100%;
            height: 100%;
        }

        #container {
            width: 100%;
            height: 90%;
        }

        .button {
            text-align: center;
            font-weight: bold;
            color: #fff;
            line-height: 26px;
            text-shadow: 1px 1px 1px #333;
            border-radius: 5px;
            position: relative;
            overflow: hidden;
            border: 1px solid #dce1e6;
        }

        .button.gray {
            color: #666;
            text-shadow: 1px 1px 1px #fff;
            border: 1px solid #dce1e6;
            box-shadow: 0 1px 2px #fff inset, 0 -1px 0 #a8abae inset;
            background: -webkit-linear-gradient(top, #f2f3f7, #e4e8ec);
            background: -moz-linear-gradient(top, #f2f3f7, #e4e8ec);
            background: linear-gradient(top, #f2f3f7, #e4e8ec);
        }
    </style>
    <title>区域路径展示demo</title>
    <!--<link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css"/>-->
    <script src="https://webapi.amap.com/maps?v=2.0&key=2db25a9eb7aafc36a93db8425218c344&plugin=AMap.PolylineEditor"></script>
    <!--<script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script>-->

</head>
<body>
<div style="padding: 20px">
    <input id="date" style="width:200px" type="date">
    <button class="button gray" onclick="getPath()">搜索路径</button>
</div>

<div id="container"></div>
<!--<script src="libs/moment.min.js"></script>-->
<script src="libs/axios.min.js"></script>
<script type="text/javascript">
    setTimeout(() => {
        init();
    }, 10)
    console.log(date)

    function getPath() {
        let date = document.getElementById('date').value
        console.log(date)
        console.log('获取路径')


        // axios.get('http://1.82.240.17:8091/hand/locationInf?search_date=' + date).then(res => {
        axios.get('http://124.223.209.222:8092/hand/locationInf?search_date=' + date).then(res => {
            console.log('获取到的路径数据', res)
            if (res.data && res.data.data && res.data.data.length) {
                let list = res.data.data
                let paths = []
                list.forEach(v => {
                    let item = paths.find(val => val.imei == v.imei)
                    if (item) {
                        item.path.push({
                            latitude: v.latitude,
                            longitude: v.longitude,
                        })
                    } else {
                        paths.push({
                            imei: v.imei,
                            path: [{
                                latitude: v.latitude,
                                longitude: v.longitude,
                            }]
                        })
                    }
                })
                console.log('路径汇总', paths);
                paths.forEach(renderPath)


            } else {
                alert('未获取到日期 ' + date + ' 的路径数据')
            }


        })

    }

    var map

    function init() {

        map = new AMap.Map("container", {
            center: [111.006536,35.026872],
            zoom: 14
        });


        let inputDom = document.getElementById('date')
        // let date = moment().format('YYYY-MM-DD')
        let date = '2023-03-28'
        inputDom.value = date
        this.getPath();

        // var path = [
        //     [116.362209, 39.887487],
        //     [116.422897, 39.878002],
        //     [116.372105, 39.90651],
        //     [116.428945, 39.89663]
        // ];
        //
        // console.log('path', path)
        // path = [
        //     [111.017907,40.031257],
        //     [111.017956,40.031186],
        //     [111.018298,40.030989],
        //     [111.018259,40.030624],
        //     [111.018418,40.030499],
        //     [111.018541,40.030208],
        //     [111.018541,40.030208],
        //     [111.01854,40.030134],
        // ];
        // var polyline = new AMap.Polyline({
        //     path: path,
        //     isOutline: true,
        //     outlineColor: '#ffeeff',
        //     borderWeight: 3,
        //     strokeColor: "#3366FF",
        //     strokeOpacity: 1,
        //     strokeWeight: 6,
        //     strokeStyle: "solid",
        //     strokeDasharray: [10, 5],
        //     lineJoin: 'round',
        //     lineCap: 'round',
        //     zIndex: 50,
        // })
        // var polygonPath = [
        //     new AMap.LngLat(116.46, 39.93),
        //     new AMap.LngLat(116.44, 39.91),
        //     new AMap.LngLat(116.49, 39.91)
        // ];
        var polygon = new AMap.Polygon({
            path: [
                [111.017109, 40.031588],
                [111.017304, 40.029345],
                [111.020188, 40.029428],
                [111.019362, 40.031741],

            ]
        });
        // var text = new AMap.Text({
        //     text:'黄良仙打卡成功',
        //     anchor:'left',
        //     draggable:false,
        //     cursor:'pointer',
        //     angle:0,
        //     style:{
        //         'padding': '.75rem 1.25rem',
        //         'margin-left': '3rem',
        //         'margin-top': '5rem',
        //         'border-radius': '.25rem',
        //         'background-color': 'rgba(114, 124, 245, .8)',
        //         // 'width': '10rem',
        //         'border-width': 0,
        //         'box-shadow': '0 2px 6px 0 rgba(114, 124, 245, .5)',
        //         'text-align': 'left',
        //         'font-size': '16px',
        //         'color': 'white'
        //     },
        //     position: [111.018259,40.030624]
        // });

        // map.add([polyline, polygon, text]);
        // map.add([ polygon]);

        map.setFitView();
    }

    let colors = ['#3366FF', '#9966FF', '#cc66FF'];

    function renderPath(item, i) {


        let path = item.path.map(v => [v.longitude, v.latitude]);
        var polyline = new AMap.Polyline({
            path: path,
            isOutline: true,
            outlineColor: '#ffeeff',
            borderWeight: 3,
            strokeColor: colors[i % 3],
            strokeOpacity: 1,
            strokeWeight: 6,
            showDir: true,
            strokeStyle: "solid",
            strokeDasharray: [10, 5],
            lineJoin: 'round',
            lineCap: 'round',
            zIndex: 50,
        })


        var marker = new AMap.Marker({
            position: path[0],
            icon: new AMap.Icon({
                image: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png',
                imageSize: new AMap.Size(40, 50)
            }),
            anchor: 'bottom-center',
            offset: new AMap.Pixel(0, 0),
            size: new AMap.Size(40, 50),
        });

        // 设置label标签
        // label默认蓝框白底左上角显示，样式className为：amap-marker-label
        marker.setLabel({
            direction: 'right',
            offset: new AMap.Pixel(10, 0),  //设置文本标注偏移量
            content: "起点" + (i + 1), //设置文本标注内容
        });

        var marker1 = new AMap.Marker({
            position: path[path.length - 1],
            icon: new AMap.Icon({
                image: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png',
                imageSize: new AMap.Size(40, 50)
            }),
            anchor: 'bottom-center',
            offset: new AMap.Pixel(0, 0),
            size: new AMap.Size(40, 50),
        });

        // 设置label标签
        // label默认蓝框白底左上角显示，样式className为：amap-marker-label
        marker1.setLabel({
            direction: 'right',
            offset: new AMap.Pixel(10, 0),  //设置文本标注偏移量
            content: "终点" + (i + 1), //设置文本标注内容
        });

        map.add([polyline, marker, marker1]);
        map.setFitView();
    }


</script>
</body>
</html>